<template>
  <div style="height: 100%;overflow: auto;">

    <vxe-toolbar>
      <template #buttons>
        <vxe-button status="primary" @click="loadList(5000)">5k条</vxe-button>
        <vxe-button @click="loadList(10000)">1w条</vxe-button>
        <vxe-button @click="loadList(50000)">5w条</vxe-button>
        <vxe-button @click="loadList(100000)">10w条</vxe-button>
        <vxe-button @click="loadList(200000)">20w条</vxe-button>
        <vxe-button @click="loadList(300000)">30w条</vxe-button>
      </template>
    </vxe-toolbar>
    <div style="height: calc(100vh - 168px);">
      <vxe-table
        border
        show-overflow
        show-header-overflow
        ref="xTable"
        height="auto"
        :column-config="{resizable: true}"
        :sort-config="{trigger: 'cell'}"
        :loading="loading">
        <vxe-column type="seq" width="100"></vxe-column>
        <vxe-column field="name" title="Name" sortable width="140"></vxe-column>
        <vxe-column field="sex" title="Sex" width="100"></vxe-column>
        <vxe-column field="rate" title="Rate" width="100"></vxe-column>
        <vxe-column field="address" title="Address" width="150" show-overflow></vxe-column>
        <vxe-column field="attr1" title="Attr1" width="100"></vxe-column>
        <vxe-column field="attr2" title="Attr2" width="100"></vxe-column>
        <vxe-column field="attr3" title="Attr3" width="100"></vxe-column>
        <vxe-column field="attr4" title="Attr4" width="100"></vxe-column>
        <vxe-column field="attr5" title="Attr5" width="100"></vxe-column>
        <vxe-column field="attr5" title="Attr6" width="100"></vxe-column>
        <vxe-column field="attr5" title="Attr7" width="100"></vxe-column>
        <vxe-column field="attr5" title="Attr8" width="100"></vxe-column>
        <vxe-column field="attr5" title="Attr9" width="100"></vxe-column>
        <vxe-column field="attr5" title="Attr10" width="100"></vxe-column>
      </vxe-table>
    </div>

  </div>
</template>

<script>

  export default {
    name: 'VirtualScrolling',
    components: {

    },
    data() {
      return {
        loading: false
      }
    },
    created () {
      this.loadList(600)
    },
    methods: {
      loadList (size) {
        this.loading = true
        this.mockList(size).then(data => {
          // 使用函数式加载，阻断 vue 对大数据的监听
          const xTable = this.$refs.xTable
          const startTime = Date.now()
          if (xTable) {
            this.$refs.xTable.reloadData(data).then(() => {
              this.messageUtil.success({ content: `渲染 ${size} 行，用时 ${Date.now() - startTime}毫秒`, status: 'info' })
              this.loading = false
            })
          }
        })
      },
      mockList (size) {
        return new Promise(resolve => {
          const list = []
          for (let index = 0; index < size; index++) {
            list.push({
              name: `名称${index}`,
              sex: '0',
              age: 18,
              rate: 3,
              address: 'shenzhen',
              attr1:'attr1',
              attr2:'attr2',
              attr3:'attr3',
              attr4:'attr4',
              attr5:'attr5',
              attr6:'attr6',
              attr6:'attr7',
              attr6:'attr8',
              attr6:'attr9',
              attr6:'attr10',
            })
          }
          resolve(list)
        })
      },
    }
  }
</script>
<style lang="less" scoped>

</style>
